<template>
    <div class="cont">
        <van-popup v-model="show" :style="{width: '85vw'}" @close="close" close-on-popstate closeable>
            <div class="popup-box">
                <div class="title">通讯录好友</div>
                <div class="list-box">
                    <div class="title">*请在微信中选择跟发朋友圈的好友发送消息“123”后返回刷新列表</div>
                    <div class="list-box-cont">
                        <div class="top flex align-center justify-between">
                            <i  class="color"></i>
                            <div class="text flex align-center text-bold">
                                已激活的好友
                            </div>
                            <img @click="listRefresh = true;getList()" :class="listRefresh ? 'rotate' : ''" src="@/assets/img/refresh-icon-gray.png" alt="">
                        </div>
                        <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                        >
                            <van-radio-group v-model="radioValue" icon-size="18">
                                <van-cell-group :border="false">
                                    <van-cell 
                                    v-for="(item,index) in list" 
                                    :key="index" 
                                    :border="false"
                                    @click="itemClick(item,index)"
                                    clickable
                                    class="list-item">
                                        <template #title>
                                            <div class="flex align-center">
                                                <img :src="item.avatar" alt="" class="avatar">
                                                <span class="name van-ellipsis">{{item.name}}</span>
                                            </div>
                                        </template>
                                        <template #right-icon>
                                            <van-radio :name="index" />
                                        </template>
                                    </van-cell>
                                </van-cell-group>
                            </van-radio-group>
                        </van-list>
                    </div>
                </div>
                <div @click="confrim" class="bottom-btn">确定</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Popup, Search, List, RadioGroup, Radio, CellGroup, Cell } from 'vant'
export default {
    components: {
        [Popup.name]: Popup,
        [Search.name]: Search,
        [List.name]: List,
        [RadioGroup.name]: RadioGroup,
        [Radio.name]: Radio,
        [CellGroup.name]: CellGroup,
        [Cell.name]: Cell
    },
    props: {
        popupVisible: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            show: this.popupVisible,
            config: this.$DB.get('robotCfg'),
            keyword: '',
            loading: false,
            finished: true,
            list: [
                {
                    avatar: 'https://h5.dhcc.wang/newprogram/images/center-nav.png',
                    name: '微信好友'
                },
                {
                    avatar: 'https://h5.dhcc.wang/newprogram/images/center-nav.png',
                    name: '微信好友'
                },
                {
                    avatar: 'https://h5.dhcc.wang/newprogram/images/center-nav.png',
                    name: '微信好友'
                },
                {
                    avatar: 'https://h5.dhcc.wang/newprogram/images/center-nav.png',
                    name: '微信好友'
                },
                {
                    avatar: 'https://h5.dhcc.wang/newprogram/images/center-nav.png',
                    name: '微信好友'
                }
            ],
            radioValue: 0,
            listRefresh: false
        }
    },
    created () {},
    methods: {
        getList () {
            setTimeout(() => {
                this.listRefresh = false
            }, 500)
        },
        onLoad () {},
        itemClick (item, index) {
            this.radioValue = index
        },
        cancel () {},
        confrim () {
        },
        close () {
            this.$emit('close')
        }
    }
}
</script>
<style lang="less" scoped>
em{
    font-style: normal;
}
.cont{
    /deep/ .van-popup{
        border-radius: 10px;
    }
    .popup-box{
        padding: 20px 15px;
        .title{
            font-size: 16px;
            font-weight: bold;
            text-align: center;
        }
        .van-search{
            padding: 10px 0 0;
        }
        .list-box{
            &-cont{
                max-height: 320px;
                overflow-y: scroll;
                .top{
                    padding: 15px 0 15px 10px;
                    position: relative;
                    border-bottom: 1px solid #f5f5f5;
                    padding-left: 10px;
                    .color{
                        content: '';
                        position: absolute;
                        left: 0;
                        width: 2px;
                        height: 14px;
                        border-radius: 2px;
                    }
                    img{
                        width: 20px;
                        height: 20px;
                    }
                }
            }
            .title{
                padding: 10px 0;
                color: #EC3224;
                font-size: 12px;
                text-align: left;
            }
            .list-item{
                padding: 10px 0;
                border-bottom: 1px solid #eee;
                .van-cell__title{
                    min-width: 0;
                }
                .avatar{
                    margin-right: 5px;
                    width: 22px;
                    height: 22px;
                    border-radius: 50%;
                }
            }
        }
        .bottom-btn{
            margin: 10px auto 0;
            width: 160px;
            height: 38px;
            line-height: 38px;
            color: #fff;
            border-radius: 6px;
            font-size: 15px;
            text-align: center;
        }
    }
}
</style>